import { Component } from 'solid-js';
import { useNavigate } from '@solidjs/router';
import { useCollectionStore } from './store';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

const Collections: Component = () => {
  const navigate = useNavigate();
  const { collections } = useCollectionStore();

  return (
    <div class="p-6 w-full h-full">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-6">
        {collections().map((collection) => (
          <Card
            class="cursor-pointer hover:bg-accent/50 transition-colors"
            onClick={() => navigate(`/collectionDetail/${collection.id}`)}
          >
            <CardHeader class='p-4'>
              <CardTitle>{collection.name}</CardTitle>
              <CardDescription>{collection.description}</CardDescription>
            </CardHeader>
            <CardContent class='px-4'>
              <p class="text-sm text-muted-foreground">
                收藏应用：{collection.apps.length} 个
              </p>
              <p class="text-sm text-muted-foreground">
                更新时间：{new Date(collection.updatedAt).toLocaleDateString()}
              </p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default Collections;